<template>
    <div>
        <div class="c_box1">
            <div class="c_dialog">课程资料</div>
            <div class="c_meau">
              <ul>
                <li class="details" @click="goDetails()"><a href="javascript"></a>第一章 </li>
              </ul>
              <el-pagination
                 background
                 layout="prev, pager, next"
                 :total="total"
                 :page-size="pageSize"
                 class = "c_pag">
              </el-pagination>
            </div>   
        </div>
    </div>
</template>

<script>
// import {Collapse} from 'element-ui'
export default{
    name:'CourseDetail',
    data(){
        return{
          activeNames: ['1'],
          total:10,
          pageSize:5
        }
    },
    components:{
    //   [Collapse.name]:Collapse
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      goDetails(){
        this.$router.push({
          path:'/coursed'
        })
      }
    }
}
</script>

<style lang="scss" >
    .c_box1{
        width: 100%;
        min-height: 800px;
        height: auto;
        background-color: white;
        border-radius: 20px;
        position: relative;
        .c_dialog{
           width: 90%;
           position:absolute;
           top: 80px;
           left: 5%;
           font-size: 28px;
           padding-bottom: 5px;
           border-bottom: 1px solid #ccc;
        }
        .c_meau{
           position:absolute;
           min-width: 90%;
           height: auto;
           top:200px;
           left: 5%;
           .details{
             height: 60px;
             width: 100%;
             border: 1px solid #ccc;
             border-radius: 10px;
             margin-bottom: 10px;
             cursor: pointer;
             font-size: 24px;
             line-height: 60px;
             a{
              margin-left:20px;
             }
           }
           .c_pag{
            float: right;
            margin-top: 20px;
           }
        }
    }
</style>